<template>
    <div class="body" >
  <h1>用户列表</h1>
        <ul>
            <li v-for="user in users" :key="user.id">
              {{ user.username }}============> ({{ user.email }})
              <input type="checkbox" :id="user.id" :value="user.id" v-model="selected">
            </li>
            
        </ul>
        <form @submit.prevent="addUser">
            <input v-model="name" placeholder="姓名" />
            <input v-model="email" placeholder="邮箱" />
            <button type="submit">添加用户</button>
        </form>
        <br/>
        <button @click="deleteSelected">勾选进行删除</button>
     
          
      </div>
        
  </template>
 <script>
 import { fetchUsers,loginByNameEmail, createUser, deleteeUsers} from '@/api/user';
 
 export default {
   data() {
       return {
           users: [],
           name: '',
           email: '',
           selected:[],
           radio:'1',
           verify:'',
           LableInput:'',
           codeImageUrl:'https://meis.gzfezx.com/public/verify.html?'
       };
   },
   async created() {
       // 获取用户列表
       this.users = await fetchUsers();
   },
   methods: {
       getNewCode(){
         this.codeImageUrl = 'https://meis.gzfezx.com/public/verify.html?'+1+Math.random();
       },
       async loginBtn(){
         if(this.name==''){
           this.$message.warning('账号不能为空');
           return
         }
         if(this.email==''){
           this.$message.warning('密码不能为空');
           return
         }
         if(this.verify==''){
           this.$message.warning('验证码不能为空');
           return
         }
         const newUser = await loginByNameEmail({ username: this.name, email: this.email });
         if(newUser[0]){
           this.$message({
             message: '登录成功',
             type: 'success'
           });
         }else{
           this.$message.error('账号或密码错误');
         }
         
       },
       async deleteSelected(){
         console.log(this.selected)
         await deleteeUsers({ ids: this.selected});
         this.users = await fetchUsers();//查询数据库
       },
       async addUser() {
         if(this.name==''||this.email==''){
           alert('请输入对应数据')
           return
         }
           const newUser = await createUser({ username: this.name, email: this.email });
           this.users.push(newUser); //返回成功加入 更新列表
           // this.users = await fetchUsers();//查询数据库
           this.name = '';
           this.email = '';
       },
   },
 };
 </script>
  
 
 <style>
  body{
    margin: 0;
  }
  </style>
  <style scoped>
  
  .body{
    background-image: url('../../assets/img/detail_bg.webp') ;
    /* background-repeat: no-repeat; */
    background-attachment: fixed;
    background-size: cover;
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  </style>